<template>
	<view class="answer-alert" :style="`background:#FFFFFF url(${$imgurl}/static/mtpj-bg.png) no-repeat; background-size:100% 128rpx;`">
		<image class="title" :src="`${$imgurl}/static/mtpj-title.png`" mode=""></image>
		<view class="wen">
			<image :src="`${$imgurl}/static/icon-wen.png`" mode=""></image> {{giftInfo.title}}
		</view>
		<view class="dats" v-if="giftInfo.tip">
			<image :src="`${$imgurl}/static/dats.png`" mode=""></image>
			<view class="p">
				答案是{{giftInfo.answer_long>0?giftInfo.answer_long+'个':''}}{{giftInfo.type=='text'?'文字':(giftInfo.type=='num'?'数字':'字母')}}
			</view>
		</view>
		<view class="textarea">
			<textarea name="" id="" cols="30" v-model="answer" rows="10" placeholder="输入答案"></textarea>
		</view>
		<view class="time" >
			结束倒计时：
			<up-count-down v-if="giftInfo.end_time-Date.now()/1000>0" :time="(giftInfo.end_time-Date.now()/1000)>0?giftInfo.end_time-Date.now()/1000:0" format="HH:mm:ss"></up-count-down>
			<view  style="color:#838A99" v-else>已结束</view>
		</view>
		<!-- v-if="giftInfo.end_time-Date.now()/1000>0" -->
		<view class="btn"  @click="onSubmitAnswer">
			确定提交
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const answer=ref('')
	const emits = defineEmits();
	let props = defineProps({
			giftInfo:{
				type:Object,
				default:{}
			}
		});
	const onSubmitAnswer =()=>{
		emits('onSubmitAnswer',answer.value)
		answer.value=''
	}
		
</script>

<style lang="scss">
	.answer-alert{
		// position: relative;
		padding:0 56rpx;
		border-radius: 48rpx 48rpx 0 0;
		padding-bottom: 68rpx;
		.title{
			position: relative;top:-20rpx;
			height:88rpx;
			display: block;
			width:476rpx;
			left:50%;
			transform: translateX(-50%);
		}
		.wen{
			display: flex;
			font-weight: bold;align-items: center;
			image{
				width:36rpx;height:36rpx;margin-right:10rpx;
			}
		}
		.dats{
			background-color: #F5F6FA;
			border-radius: 16rpx;
			padding:24rpx 22rpx;
			margin-top:30rpx;
			image{
				width: 176rpx;
				height:42rpx;
			}
			.p{
				font-size: 24rpx;
				color:#838A99;
				margin-top: 10rpx;
			}
		}
		.textarea{
			background-color: #F5F6FA;
			border-radius: 16rpx;
			padding:24rpx 22rpx;
			margin-top:16rpx;
			textarea{
				width:100%;height:200rpx;
			}
		}
		.time{
			display: flex;
			font-size: 28rpx;
			margin-top:64rpx;
			justify-content: center;
			::v-deep{
				.u-count-down__text{
					color:#F5493D;line-height: 1;font-size:24rpx;font-weight: bold;
				}
			}
		}
		.btn{
			
			line-height: 96rpx;
			margin-top: 24rpx;
			background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			text-align: center;font-weight: bold;
			color:#fff;
		}
	}
	
	
	
</style>